<template>
  <el-card>
    <div slot="header" style="font-size:20px;">{{scoreInfo.scoreId ? '修改' : '添加'}}学生成绩</div>
    <div>
      <el-form ref="scoreForm" :rules="scoreRules" :model="scoreInfo" label-width="80px">
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item prop="studentName" label="姓名">
              <el-input v-model="scoreInfo.studentName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item prop="ps" label="PS">
              <el-input v-model="scoreInfo.ps"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item prop="ai" label="Ai">
              <el-input v-model="scoreInfo.ai"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item prop="ae" label="Ae">
              <el-input v-model="scoreInfo.ae"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item prop="html_css" label="Html_Css">
              <el-input v-model="scoreInfo.html_css"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item prop="javascript" label="JavaScript">
              <el-input v-model="scoreInfo.javascript"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="9">
            <el-form-item prop="node" label="Node">
              <el-input v-model="scoreInfo.node"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item prop="vue" label="Vue">
              <el-input v-model="scoreInfo.vue"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item>
          <el-button type="warning" @click="cancelBtn">取消</el-button>
          <el-button type="primary" @click="submitAddOrUpdateScore">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
export default {
  name: "scoreForm",
  props:['getStudentScore'],
  data() {
    // 校验分数
    const checkScore = (rule, value, callback) => {      
      let reg = /^\d{1,3}$/
      if(value > 100){
        callback(new Error('请输入正确的分数'))
      }else{
        reg.test(value) ? callback() : callback(new Error('请输入数值'))
      }
    }
    return {
      // 成绩信息
      scoreInfo: {
        studentName: "",
        ps: "",
        ai: "",
        ae: "",
        html_css: "",
        javascript: "",
        node: "",
        vue: ""
      },
      // 校验表单
      scoreRules:{
        studentName:[
          {required:true,message:'请输入姓名',trigger:'blur'}
        ],
        ps:[
          {required:true,message:'请输入Ps成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ],
        ai:[
          {required:true,message:'请输入Ai成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ],
        ae:[
          {required:true,message:'请输入Ae成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ],
        html_css:[
          {required:true,message:'请输入Html_Css成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ],
        javascript:[
          {required:true,message:'请输入JavaScript成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ],
        node:[
          {required:true,message:'请输入Node成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ],
        vue:[
          {required:true,message:'请输入Vue成绩',trigger:'blur'},
          {validator:checkScore,trigger:'blur'}
        ]
      },  
    }
  },
  methods: {
    // 取消按钮
    cancelBtn(){
      this.$emit('flag',true)
    },
    // 确定按钮
    submitAddOrUpdateScore(){
      this.$refs.scoreForm.validate(async isTrue => {
        if(isTrue){
          try {
            let result = await this.$store.dispatch('studentScore/getAddOrUpdateStudentScore', this.scoreInfo);
            if(result.code === 200){
              this.$message.success(`${this.scoreInfo.scoreId?'修改成功':'添加成功'}`)
              this.getStudentScore()
              // 确定后 将 true 传给父组件， 作用返回信息页面
              this.$emit('flag',true)
            }
          } catch (error) {
            this.$message.error(`${error.message}`)
          }
        }else{
          return false
        }
      })
    },
  },
};
</script>

<style>
</style>